<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- <form action="demo.php" method="POST" name="name1"></form> -->
    <form>
        <h4>input表单元素</h4>
        <p>
            <label for="username">用户名:</label><input type="text" name="username" id="username" value="请输入用户名" maxlength="6"> <br>
        <!-- maxlength用户最大输入的长度 -->
        <!-- text文本框 用户可以输入任何文字 -->
        密码:<input type="password" name="password"> <br>
        <!-- password 密码字段,字符被掩码啊 -->
        性别:<input type="radio" name="sex" value="男" id="nan"> <label for="nan">男</label> <input type="radio" value="女" name="sex" checked="checked" id="nv"> <label for="nv">女</label><br>
        <!-- radio是单选按钮 可以实现多选一 -->
        <!-- name是表单元素名字 性别单选按钮必须有相同名字才能多选一 -->
        <!-- 单选和复选框可以设置checked的属性 当页面打开的时候就可以默认选中这个按钮 -->
        爱好:<input type="checkbox"  name="hobby" value="吃饭">吃饭 <input type="checkbox" name="hobby" value="睡觉">睡觉 <input type="checkbox" name="hobby" value="打豆豆">打豆豆
        <!-- checkbox是复选框 可是是实现多选 -->
        <br>

        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写">
        <!-- submit的意思就是提交 发送信息给后台 reset就是重置 -->

        <input type="button" value="获取短信验证码">
        <!-- 后期结合js搭配使用 -->
        上传头像:<input type="file">
        <!-- 文件域使用场景 上传文件 -->

        <!-- <label for="sex">男</label> -->
        <!-- <input type="radio" id="sex"> -->
        <!-- label标签可以绑定一个表单元素,当点击label内文本时光标会自动转到对应表单元素 -->


    </p>

    
        <img src="tyoe.png">
    
    </form>
</body>
</html>